<template>
  <view class="container">
    <!-- 加载状态提示 -->
    <view v-if="loading" class="loading">
      <uni-icons type="spinner-cycle" size="30" color="#999"></uni-icons>
      <text>加载中...</text>
    </view>

    <!-- 数据列表 -->
    <scroll-view 
      scroll-y 
      class="scroll-view"
      @refresherrefresh="onRefresh"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @scrolltolower="onReachBottom"
    >
      <view 
        v-for="item in orders" 
        :key="item.taskId" 
        class="order-item"
        @click="viewDetail(item.taskId)"
      >
        <view class="order-info">
          <view class="header">
            <text class="task-id">工单ID：{{ item.taskId }}</text>
            <text class="time">{{ formatTime(item.createTime) }}</text>
          </view>
          <text class="sku-name">{{ item.skuName }}</text>
          <view class="meta-info">
            <text class="quantity">区域：{{ item.region.regionName  }}</text>
			<text class="type-name">{{ item.taskType.typeName }}</text>
          </view>
          <!-- 新增完成状态显示 -->
          <view class="status-info">
            <text class="status" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</text>
            <text class="progress" v-if="item.progress">进度: {{ item.progress }}%</text>
          </view>
        </view>
      </view>

      <!-- 空状态提示 -->
      <view v-if="!loading && orders.length === 0" class="empty">
        <uni-icons type="info" size="50" color="#999"></uni-icons>
        <text>暂无工单数据</text>
      </view>

      <!-- 加载更多提示 -->
      <view class="load-more">
        {{ noMore ? '没有更多数据了' : '上拉加载更多' }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { listTask } from '@/api/work' // 导入新的API方法

export default {
  data() {
    return {
      orders: [],
      loading: true,
      isRefreshing: false,
      currentPage: 1, // 注意：根据后端接口改为1-based分页
      pageSize: 20,
      total: 0,
      noMore: false
    }
  },
  onLoad(options) {
    this.empId = options.empId || null; // 如果有empId参数则接收它
    this.loadData(true);
  },
  methods: {
    // 加载数据
    async loadData(isRefresh = false) {
      try {
        this.loading = true;
        const pageNum = isRefresh ? 1 : this.currentPage;

        const res = await listTask({
          empId: this.empId, // 如果需要根据empId过滤，则添加此参数
          pageNum,
          pageSize: this.pageSize
        });

        this.total = res.total;
        const newData = res.rows.map(item => ({
          taskId: item.taskId,
          skuName: item.skuName,
          productType: item.productType,
          imageUrl: item.imageUrl + '?x-oss-process=image/resize,w_200',
          createTime: item.createTime,
          status: item.taskStatus, // 使用 taskStatus 字段
          progress: item.progress || 0, // 添加进度字段，默认为0
          region: {
            regionName: item.region.regionName // 区域名称
          },
          taskType: {
            typeName: item.taskType.typeName // 工单类型名称
          }
        }));
        this.orders = isRefresh ? newData : [...this.orders, ...newData];
        this.noMore = this.orders.length >= this.total;
        this.currentPage = pageNum;

      } catch (e) {
        uni.showToast({
          title: `加载失败: ${e.message}`,
          icon: 'none'
        });
      } finally {
        this.loading = false;
        this.isRefreshing = false;
      }
    },

    // 下拉刷新
    onRefresh() {
      this.isRefreshing = true;
      this.currentPage = 1;
      this.loadData(true);
    },

    // 滚动加载
    onReachBottom() {
      if (!this.noMore && !this.loading) {
        this.currentPage++;
        this.loadData();
      }
    },

    // 查看详情
    viewDetail(taskId) {
      uni.navigateTo({
        url: `/pages/orderDetail/orderDetail?taskId=${taskId}`
      });
    },

    // 状态文本映射
    getStatusText(status) {
      const statusMap = {
        1: '待办',
        2: '进行',
        3: '取消',
        4: '完成'
      };
      return statusMap[status] || '未知状态';
    },

    // 状态样式类
    getStatusClass(status) {
      const classMap = {
        1: 'status-pending',
        2: 'status-processing',
        3: 'status-cancelled',
        4: 'status-completed'
      };
      return classMap[status] || 'status-unknown';
    },

    // 时间格式化
    formatTime(time) {
      if (!time) return '';
      const date = new Date(time);
      return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: #f5f5f5;
}

.scroll-view {
  height: calc(100vh - 10px);
  padding: 15rpx;
}

.order-item {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);

  .product-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
  }

  .order-info {
    flex: 1;
    
    .header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;

      .task-id {
        font-size: 28rpx;
        color: #666;
      }

      .time {
        font-size: 24rpx;
        color: #999;
      }
    }

    .sku-name {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
      margin-bottom: 15rpx;
      display: block;
    }

    .meta-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;

      text {
        font-size: 26rpx;
        color: #666;

        &.quantity {
          color: #1890ff;
        }

        &.type {
          color: #52c41a;
        }
      }
    }

    .status-info {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .status {
        font-size: 26rpx;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;

        &-pending {
          color: #faad14;
          background-color: #fffbe6;
        }

        &-processing {
          color: #1890ff;
          background-color: #e6f7ff;
        }

        &-completed {
          color: #52c41a;
          background-color: #f6ffed;
        }

        &-cancelled {
          color: #f5222d;
          background-color: #fff1f0;
        }

        &-rejected {
          color: #f5222d;
          background-color: #fff1f0;
        }

        &-unknown {
          color: #666;
          background-color: #f5f5f5;
        }
      }

      .progress {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}

.loading, .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200rpx;
  
  text {
    margin-top: 20rpx;
    color: #999;
  }
}

.load-more {
  text-align: center;
  padding: 30rpx;
  color: #999;
  font-size: 26rpx;
}
</style>